import React, { Component } from "react";

export default class App extends Component {
  state = {
    list: ["11", "22", "33"],
  };
  render() {
    return (
      <div>
        <h1>09-list-for</h1>

        <ul>
          {this.state.list.map((item, index) => (
            <li key={item}>
              <span>{item}</span>
              <button
                type="button"
                onClick={() => {
                  console.log("del", index, item);
                  const arr = [...this.state.list];
                  // 删除元素，返回删除的元素
                  arr.splice(index, 1);
                  console.log("arr", arr);
                  this.setState({
                    list: arr,
                  });
                }}
              >
                del
              </button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

/**
 * 为了列表的复用和重排，我们使用key来标识列表中的每一项，这样当列表发生改变时，react会重新渲染列表，而不是重新渲染整个列表。
 */
